<!-- 不合格品现象 -->
<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button-group>
        <el-button v-if="reasonManager_btn_add" type="primary" icon="plus" @click="handlerAdd">添加
        </el-button>
        <el-button v-if="reasonManager_btn_edit" type="primary" icon="edit" @click="handlerEdit">编辑
        </el-button>
        <el-button v-if="reasonManager_btn_del" type="primary" icon="delete" @click="handleDelete">删除
        </el-button>
      </el-button-group>
    </div>

    <el-row>
      <el-col :span="8" style="margin-top:15px;">
        <el-tree :data="treeData" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree" node-key="id"
          highlight-current default-expand-all @node-click="getNodeData" />
      </el-col>
      <el-col :span="16" style="margin-top:15px;">

        <el-form ref="form" :label-position="labelPosition" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="父级节点" prop="parentId">
            <el-input v-model="form.parentId" disabled placeholder="请输入父级节点" />
          </el-form-item>
          <el-form-item label="原因" prop="name">
            <el-input v-model="form.name" :disabled="formEdit" placeholder="请输入原因" />
          </el-form-item>
          <el-form-item v-if="formStatus == 'update'">
            <el-button type="primary" @click="update" v-prevent-re-click>更新
            </el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
          <el-form-item v-if="formStatus == 'create'">
            <el-button type="primary" @click="create" v-prevent-re-click>保存
            </el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { addObj, delObj, fetchTree, getObj, putObj } from '@/api/admin/dept'
  import { mapGetters } from 'vuex'
  import {
    fetchUnqualifiedReasonTree,
    getUnqualifiedReasonObj,
    addUnqualifiedReasonObj,
    putUnqualifiedReasonObj,
    delUnqualifiedReasonObj
  } from '@/api/eims/unqualifiedreason'

  export default {
    name: 'Dept',
    data() {
      return {
        list: null,
        total: null,
        formEdit: true,
        formAdd: true,
        formStatus: '',
        showElement: false,
        typeOptions: ['0', '1'],
        methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
        listQuery: {
          name: undefined
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        rules: {
          parentId: [{
            required: true,
            message: '请输入父级节点',
            trigger: 'blur'
          }],
          id: [{
            required: true,
            message: '请输入节点编号',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }]
        },
        labelPosition: 'right',
        form: {
          name: undefined,
          sort: undefined,
          parentId: undefined,
          id: undefined
        },
        currentId: 0,
        reasonManager_btn_add: false,
        reasonManager_btn_del: false,
        reasonManager_btn_edit: false
      }
    },
    created() {
      this.getList()
      this.reasonManager_btn_add = this.permissions['eims_unqualifiedreason_add']
      this.reasonManager_btn_del = this.permissions['eims_unqualifiedreason_del']
      this.reasonManager_btn_edit = this.permissions['eims_unqualifiedreason_edit']

    },
    computed: {
      ...mapGetters([ 'elements', 'permissions' ])
    },
    methods: {
      getList() {
        fetchUnqualifiedReasonTree(this.listQuery).then(response => {
          if(response.data.code == '0'){
            this.treeData = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      getNodeData(data) {
        if (!this.formEdit) {
          this.formStatus = 'update'
        }
        getUnqualifiedReasonObj(data.id).then(response => {
          if(response.data.code == '0'){
            this.form = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
        this.currentId = data.id
        this.showElement = true
      },
      handlerEdit() {
        if (this.form.id) {
          this.formEdit = false
          this.formStatus = 'update'
        }
      },
      handlerAdd() {
        this.resetForm()
        this.formEdit = false
        this.formStatus = 'create'
      },
      handleDelete() {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delUnqualifiedReasonObj(this.currentId).then(response => {
            if(response.data.code == '0'){
              this.getList()
              this.resetForm()
              this.onCancel()
              this.$notify({title: '成功',message: '删除成功',type: 'success',duration: 2000})
            }else{
              this.$message.error(response.data.msg)
            }
          })
        })
      },
      update() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          putUnqualifiedReasonObj(this.form).then(response => {
            if(response.data.code == '0'){
              this.getList()
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message.error(response.data.msg)
            }
          })
        })
      },
      create() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          addUnqualifiedReasonObj(this.form).then(response => {
            if(response.data.code == '0'){
              this.getList();
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message.error(response.data.msg)
            }
          })
        })
      },
      onCancel() {
        this.formEdit = true
        this.formStatus = ''
      },
      resetForm() {
        this.form = {
          parentId: this.currentId
        }
      }
    }
  }
</script>
